<template>
  <div  class="htmlCon">
      <div>
          <div>
              <div >
                  <el-collapse  :class="moods" v-model="activeName" accordion>
                    <el-collapse-item title="存储数据" name="1" disabled>
                      <div><i class="iconfont icon-shujuku"></i><h2>Pinia（基于v3）</h2></div>
                      <pre>
        安装 Pinia
        安装需要 @next 因为 Pinia 2 处于 beta 阶段, Pinia 2 是对应 Vue3 的版本
        # 使用 npm
        npm install pinia@next
        # 使用 yarn
        yarn add pinia@next
                      </pre>
                      <h3>使用</h3>
    <pre>
         首先在main.js 中引入 pinia
         import {createPinia} from "pinia"
         Vue.use(createPinia)
         创建store.js文件
         定义store
         import {defineStore} from "pinia"
         <h4>store是一个函数我们要把它暴露出去使用</h4>
         export default defineStore({
             因为只有一个store我们选择默认暴露
             state(){
                 state状态是一个函数，我们返回的对象就是我们要存储的值
                 return {
                     key： value
                 }
             },
             
         })
    </pre>
                    </el-collapse-item>
                    </el-collapse>
              </div>
          </div>
      </div>
         <div>
               
          </div>
  </div>
</template>

<script>
export default {
    name: "BasicState",
    data(){
        return {
            activeName: ["1"],
            // moods: "conWrapper",
        }
    },
    // methods: {
    //     basicData(){
    //         window.scrollTo(100,120);
    //     },
    //     variable(){
    //         window.scrollTo(100,600);
    //     },
    //     testData(){
    //         window.scrollTo(100,900);
    //     },
    //     fun(){
    //         window.scrollTo(100,1350);
    //     },
    //     symbol(){
    //         window.scrollTo(100,1350);
    //     },
    //     ifs(){
    //         window.scrollTo(100,1350);
    //     },
    //     top(){
    //         window.scrollTo(100,0);
    //     }
        
    // }
}
</script>

<style scoped>

.conWrapper {
  width: 900px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 5px 5px 20px 5px #999;
  padding: 0px 20px;
  border-bottom-color: transparent;
  margin-right: 50px;
}
.htmlCon {
  display: flex;
  justify-content: center;
}
.htmlNav {
  position: fixed;
}
</style>